<template>
    <el-container>
        <el-header>
            <!-- 顶部 -->
            <div class="total">
                <img :src="img" class="logo">
                <div class="s1">租好房</div>
                <div class="s2">
                    <!-- 下拉菜单 -->
                    <el-dropdown @command="handleCommand" trigger="click">
                        <!-- 下拉菜单的触发器，这里使用了一个按钮 -->
                        <el-button type="danger">
                            用户 <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <!-- 下拉菜单内容 -->
                        <el-dropdown-menu slot="dropdown">
                            <!-- 修改密码选项 -->
                            <el-dropdown-item @click.native="handleCommand('ChangePassword')" icon="el-icon-edit">
                                修改密码
                            </el-dropdown-item>
                            <!-- 退出登录选项 -->
                            <el-dropdown-item @click.native="handleCommand('LoginOut')" icon="el-icon-refresh-left">
                                退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-main style="padding: 0">
            <!-- 导航栏 -->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                text-color="#000000" active-text-color="#FFFFFF">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">房源信息</el-menu-item>
                <el-menu-item index="3">留言反馈</el-menu-item>
                <el-menu-item index="4">个人中心</el-menu-item>
            </el-menu>

            <div class="container">
                <div class="lunbo" @mouseenter="clear" @mouseleave="run">
                    <div class="img">
                        <img :src="dataList[currentIndex]" alt="" style="width: 100%; height:250px" />
                    </div>
                    <div class="right turn" @click="next()">
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="left turn" @click="up()">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div>
            </div>

            <el-tag class="labelTag">
                <div class="text-container">USER/CENTER</div>
                <div class="text-container">个人中心</div>
            </el-tag>

            <div class="tabs-container">
                <el-tabs type="border-card">
                    <el-tab-pane label="我的预约">
                        <el-table :data="appointmentData" style="width: 100%">
                            <el-table-column prop="name" label="名称" width="250px"></el-table-column>
                            <el-table-column prop="address" label="地址" width="250px"></el-table-column>
                            <el-table-column prop="orderTime" label="预约日期" width="250px"></el-table-column>
                            <el-table-column prop="statue" label="状态" width="250px">
                                <template slot-scope="scope">{{ scope.row.status == 0 ? '审核中' : (scope.row.status == 1 ?
                                    '预约成功' : '预约失败') }}</template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="我的留言" @click="SearchMessage">
                        <div v-for="(message, index) in messageData" :key="index" class="message-item">
                            <el-card class="message-card">
                                <div class="message-content">{{ message.content }}</div>
                                <div class="message-time">{{ message.postTime }}</div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="原密码" prop="password">
                        <el-input v-model="ruleForm.password" style="width:250px" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password1">
                        <el-input v-model="ruleForm.password1" style="width:250px" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


        </el-main>
    </el-container>
</template>
<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
const token = sessionStorage.getItem('token');
import UserHeader from '@/components/UserHeader.vue';
import UserNavbar from '@/components/UserNavbar.vue';
export default {
    components: {
        UserHeader,
        UserNavbar,
    },
    data() {
        return {
            // 预约看房的数据  
            appointmentData: [],
            img: require('@/assets/logo.jpg'),
            // 留言的数据  
            messageData: [],
            activeIndex: '4',
            dataList: [
                'https://pic4.zhimg.com/v2-3fad3b71721d643c918742fe2e75b943_1440w.jpg',
                'https://img.zcool.cn/community/0115a95cf34601a801205e4b189a2a.jpg@1280w_1l_2o_100sh.jpg',
                'https://www.mailizc.com/data/u353230/weixin_article__7_1544164704236.jpg'
            ],
            currentIndex: 0, // 默认显示图片
            timer: null, // 定时器
            textarea: '',
            ruleForm: {
                password: '',
                password1: '',
            },
            dialogVisible: false,
            rules: {
                password: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                password1: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        handleSelect(index, indexPath) {
            console.log(index, indexPath);
        },
        handleCommand(command) {
            switch (command) {
                case 'ChangePassword':
                    this.dialogVisible = true;
                    break;
                case 'LoginOut':
                    this.$router.push({ name: "login" });
                    break;
                default:
                    console.log('未知命令');
            }
        },
        submitForm(ruleForm) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    axios.get(`/user/changePassword/${ruleForm.password}/${ruleForm.password1}`, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(res => {
                        if (res.data.msg == "success") {
                            this.$message({
                                message: "修改成功",
                                type: "success"
                            })
                            this.ruleForm.password = '';
                            this.ruleForm.password1 = '';
                            this.dialogVisible = false;
                        } else {
                            this.$message({
                                message: "密码错误",
                                type: "error"
                            })
                        }
                    })
                } else {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    })
                    return false;
                }
            });
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "home" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "house" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "message" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "center" });
                    break;
            }
        },
        submit() {
            if (this.textarea == '') {
                this.$message({
                    message: '请输入内容',
                    type: 'error'
                })
            } else {
                this.$message({
                    message: '提交成功',
                    type: 'success'
                })
                this.textarea = '';
            }

        },
        reset() {
            this.textarea = '';
        },
        next() {
            if (this.currentIndex === this.dataList.length - 1) {
                this.currentIndex = 0
            } else {
                this.currentIndex++
            }
        },
        up() {
            if (this.currentIndex === 0) {
                this.currentIndex = this.dataList.length - 1
            } else {
                this.currentIndex--
            }
        },
        clear() {
            clearInterval(this.timer)
        },
        // 定时器
        run() {
            this.timer = setInterval(() => {
                this.next()
            }, 2000)
        },
    },
    mounted() {
        axios.get("/user/getMessage", {
            headers: {
                'Authorization': `Bearer ${token}`
            },
        }).then(result => {
            this.messageData = result.data.data;
        })
        axios.get("/user/house/getOrder", {
            headers: {
                'Authorization': `Bearer ${token}`
            },
        }).then(result => {
            this.appointmentData = result.data.data;
            console.log(this.appointmentData);
        })
    }
}
</script>

<style scoped>
.el-header,
.el-footer {
    background-color: rgb(200, 50, 50);
    color: #333333;
    text-align: center;
    line-height: 60px;
}

.logo {
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right: 15px;
}

.s1 {
    font-size: 20px;
    float: left;
    margin: auto;
    color: #FFFFFF;
}

.s2 {
    float: right;
}

.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal>.el-menu-item {
    border-bottom: none;
}

.el-menu-item.is-active {
    background-color: rgb(150, 5, 5) !important;
}

.container {
    position: relative;
    width: 100%;
    padding: 0;
}

.turn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #d0d0d073;
}

.right {
    position: absolute;
    top: 100px;
    right: 0;
}

.left {
    position: absolute;
    top: 100px;
    left: 0;
}

.current {
    color: gray;
}

.tag-group {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.labelTag {
    display: flex;
    flex-direction: column;
    /* 使子元素垂直排列 */
    justify-content: center;
    /* 垂直居中子div */
    background-color: hsl(42, 62%, 49%);
    margin: 10px auto;
    width: 80%;
    height: 60px;
}

.text-container {
    display: flex;
    /* 使文字在div中垂直居中 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    color: white;
    flex: 1;
    /* 使div充满可用空间，但不会导致内容溢出 */
    font-size: 14px;
    /* 根据需要调整文字大小 */
    overflow: hidden;
    /* 防止内容溢出） */
}

.tabs-container {
    width: 70%;
    /* 或者任何具体的宽度值，如 500px */
    margin: 0 auto;
    /* 上下外边距为0，左右外边距自动调整以实现居中 */
}

.message-item {
    margin-bottom: 20px;
    /* 每个留言项之间的间距 */
}

.message-card {
    border-radius: 4px;
    /* 圆角边框 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

.message-content {
    font-size: 14px;
    /* 留言内容的字体大小 */
    color: #333;
    /* 字体颜色 */
    padding: 16px;
    /* 内边距 */
}

.message-time {
    font-size: 12px;
    /* 时间的字体大小 */
    color: #666;
    /* 时间的字体颜色 */
    padding: 8px 16px;
    /* 内边距，确保时间不会紧贴内容边缘 */
    background-color: #f8f8f8;
    /* 时间的背景色，以便与内容区分 */
}
</style>